<template>
  <!-- 最外层定义一个全局类 -->
  <div class="mod-grid">
    <!-- 顶部操作区域最外层控制 -->
    <div class="content-top">
      <!-- 定义一个栅格行 -->
      <el-row :gutter="20">
        <!-- 在小屏幕中展示两行，在大屏幕中展示一行 -->
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="14">
          <!-- 定义一个form进行数据过滤查询和其他常用操作按钮 -->
          <!-- 在只有一个表单的情况下，表单绑定默认为dataForm -->
          <!-- 定义表单的样式类 -->
          <!-- 表单元素都在一行内 -->
          <!-- 回车键执行数据查询 -->
          <!-- 有必要的时候可以设置id -->
          <el-form
            :model="dataForm"
            class="content-top-form"
            :inline="true"
            @keyup.enter.native="getDataList()"
            id="content-top-form-id"
          >
            <el-form-item>
              <!-- 输入框绑定form表单绑定的dataForm的一个属性 -->
              <el-input
                v-model="dataForm.userName"
                placeholder="搜索用户名"
                clearable
                style="width:100px;"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <!-- 输入框绑定form表单绑定的dataForm的一个属性 -->
              <el-input
                v-model="dataForm.email"
                placeholder="搜索邮件地址"
                clearable
                style="width:120px;"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <!-- 日期选择框，绑定dataForm的start属性；pickerOption定义的是日期选择器的选项 -->
              <el-date-picker
                v-model="dataForm.start"
                align="right"
                type="date"
                placeholder="请选择开始日期"
                :picker-options="pickerOptions"
                style="width:145px;"
              ></el-date-picker>

              <el-date-picker
                v-model="dataForm.end"
                align="right"
                type="date"
                placeholder="请选择结束日期"
                :picker-options="pickerOptions"
                style="width:145px;"
              ></el-date-picker>

              <el-button @click="getDataList()">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
          <!-- 此处的form主要用于样式控制，没有数据提交操作，所以定义的属性很少 -->
          <el-form :inline="true">
            <el-form-item>
              <!-- 此处的按钮通过权限控制其是否显示 -->
              <el-button
                v-if="isAuth('example:grid:save')"
                type="primary"
                @click="addOrUpdateHandle()"
              >新增
              </el-button>
              <el-button
                v-if="isAuth('example:grid:delete')"
                type="danger"
                @click="deleteHandle()"
                :disabled="dataListSelections.length <= 0"
              >批量删除
              </el-button>

              <!-- 此处可以定义鼠标悬停显示提示信息 -->
              <el-tooltip content="通过Excel表格导入的用户数据必须遵循相应格式">
                <el-button type="warning" icon="el-icon-setting">导入</el-button>
              </el-tooltip>

              <el-tooltip content="可以根据指定的结构将员工数据导出到Excel表格中">
                <el-button type="success" icon="el-icon-setting">
                  <!--导出Excel文件-->
                  <download-excel style="display: inline" :data="dataList" :fields="dataListFields" name="dataList.xls">
                    导出
                  </download-excel>
                </el-button>
              </el-tooltip>

              <!-- 建议为所有按钮提供功能提示信息，为每一页提供功能性说明 -->
              <el-tooltip content="点击查看帮助">
                <!-- 此处定义了一个功能性说明的帮助按钮 -->
                <el-popover placement="bottom" title="标题" width="200" trigger="click">
                  <div>
                    <div>本表为员工信息表，主要包含员工基本信息和员工工资信息。为了更加专注于员工工资信息，员工的详细信息默认被隐藏了。</div>
                    <div>如果需要查看员工详细信息，请点击每一行左侧的“>”进行查看。</div>
                    <div>注意：员工删除要慎重，特别是采用批量删除的方式删除员工是一件危险的事情，如果误删除信息，请联系管理员进行恢复操作。</div>
                  </div>
                  <el-button slot="reference" type="primary" icon="el-icon-question">帮助</el-button>
                </el-popover>
              </el-tooltip>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- end content-top-right-->
    </div>
    <!-- end content-top -->
    <!-- 中部主要内容部分 -->
    <div class="content-main">
      <!-- 定义数据展示表 -->
      <!-- 分别定义了数据绑定，边框，载入状态，执行句柄，样式等 -->
      <!-- selection-change: selectionChangeHandle 当选择项发生变化时会触发该事件 -->
      <!-- row-click:selectbyClickRow: 点击行的任意位置，选择此行 -->
      <!-- row-contextmenu：contextmenuHandle：当某一行被鼠标右键点击时会触发该事件 -->
      <el-table
        :data="dataList"
        ref="gridDataTable"
        border
        v-loading="dataListLoading"
        style="width:100%"
        fixed
        @selection-change="selectionChangeHandle"
        @row-click="clickRowHandle"
        @row-contextmenu="contextmenuHandle"
      >
        <!-- 定义列：类型为复选框 -->
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <!-- table的可扩展列：可以展示每行的未展示属性，不考虑编辑（编辑可以在此基础改造或者参照修改功能页面） -->
        <el-table-column type="expand" label="详情" width="60">
          <!-- 使用作用域插槽绑定行的所有数据到Props -->
          <template slot-scope="props">
            <el-form label-width="80px" label-position="left" size="mini">
              <el-row>
                <el-col :span="6">
                  <el-form-item prop="props.row.id">
                    <div slot="label" class="formLabel">
                      <span>编号：</span>
                    </div>
                    {{props.row.id}}
                  </el-form-item>
                  <el-form-item prop="props.row.userId">
                    <div slot="label" class="formLabel">
                      <span>工号：</span>
                    </div>
                    {{props.row.userId}}
                    <!-- <el-input v-model="props.row.userId" clearable></el-input> -->
                  </el-form-item>
                  <el-form-item prop="props.row.userName">
                    <div slot="label" class="formLabel">
                      <span>用户名：</span>
                    </div>
                    {{props.row.userName}}
                  </el-form-item>
                  <el-form-item prop="props.row.email">
                    <div slot="label" class="formLabel">
                      <span>邮箱：</span>
                    </div>
                    {{props.row.email}}
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="props.row.mobile">
                    <div slot="label" class="formLabel">
                      <span>手机号：</span>
                    </div>
                    {{props.row.mobile}}
                  </el-form-item>
                  <el-form-item prop="props.row.birthday">
                    <div slot="label" class="formLabel">
                      <span>生日：</span>
                    </div>
                    {{props.row.birthday}}
                  </el-form-item>
                  <!-- 此处的状态数据可以直接使用 -->
                  <el-form-item prop="props.row.status">
                    <div slot="label" class="formLabel">
                      <span>状态：</span>
                    </div>
                    <el-tag v-if="props.row.status === 0" size="small" type="danger">禁用</el-tag>
                    <el-tag v-else size="small">正常</el-tag>
                  </el-form-item>
                  <!-- 此处的部门数据可以直接使用 -->
                  <el-form-item prop="props.row.deptId">
                    <div slot="label" class="formLabel">
                      <span>部门：</span>
                    </div>
                    <el-cascader disabled :options="departmentOptions" v-model="props.row.deptId"></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <!-- 角色是多选值用复选框展示,roleOption是所有可能的值，roleOption[roleId]取其字面值 -->
                  <el-form-item prop="props.row.roleIdList">
                    <div slot="label" class="formLabel">
                      <span>角色：</span>
                    </div>
                    <el-checkbox-group v-model="roleOption" disabled>
                      <el-checkbox-button
                        v-for="roleId in props.row.roleIdList"
                        :label="roleOption[roleId]"
                        :key="roleId"
                      >{{roleOption[roleId]}}
                      </el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                  <!-- 等级1-5级，采用评分展示 -->
                  <el-form-item prop="props.row.grade">
                    <div slot="label" class="formLabel">
                      <span>等级：</span>
                    </div>
                    <el-rate
                      v-model="props.row.grade"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    ></el-rate>
                  </el-form-item>
                  <!-- 综合评分100分，采用InputNumber展示  label="综合评分:"-->
                  <el-form-item prop="props.row.rate">
                    <div slot="label" class="formLabel">
                      <span>综合评分：</span>
                    </div>
                    <el-input-number v-model="props.row.rate" :disabled="true"></el-input-number>
                  </el-form-item>
                  <!-- 课程列表采用复选框展示，编辑采用穿梭框操作 -->
                  <el-form-item prop="props.row.courseList">
                    <div slot="label" class="formLabel">
                      <span>课程列表：</span>
                    </div>
                    <el-checkbox-group v-model="courseOption" disabled>
                      <el-checkbox-button
                        v-for="cid in props.row.courseList"
                        :label="courseOption[cid]"
                        :key="cid"
                      >{{courseOption[cid]}}
                      </el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="props.row.headerImage">
                    <div slot="label" class="formLabel">
                      <span>相片：</span>
                    </div>
                    <el-card :body-style="{ padding: '0px' }" style="width:80px;">
                      <img :src="props.row.headerImage" class="image">
                    </el-card>
                  </el-form-item>
                  <el-form-item prop="props.row.createTime">
                    <div slot="label" class="formLabel">
                      <span>入职时间：</span>
                    </div>
                    {{props.row.createTime}}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </el-table-column>
        <!-- 列定义：prop定义显示的字段名 -->
        <el-table-column prop="userName" header-align="center" label="用户名"></el-table-column>
        <el-table-column prop="email" header-align="center" label="邮件地址"></el-table-column>
        <el-table-column prop="mobile" header-align="center" label="手机号"></el-table-column>
        <!-- VUE作用域插槽，绑定数据 -->
        <el-table-column prop="status" header-align="center" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
            <el-tag v-else size="small">正常</el-tag>
          </template>
        </el-table-column>
        <!-- 利用级联选择展示部门层级[注意级联选择默认结构为value/label] -->
        <el-table-column prop="deptId" header-align="center" align="center" label="部门">
          <template slot-scope="scope">
            <el-cascader disabled :options="departmentOptions" v-model="scope.row.deptId"></el-cascader>
          </template>
        </el-table-column>
        <el-table-column prop="sort" header-align="center" align="center" label="排名"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="isAuth('example:grid:update')"
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.id)"
            >修改
            </el-button>
            <el-button
              v-if="isAuth('example:grid:delete')"
              type="text"
              size="small"
              @click="deleteHandle(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页栏 -->
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
      <!-- 定义行的右键菜单 -->
      <vue-context-menu
        :contextMenuData="menuData"
        @select="selectData"
        @update="updateData"
        @delete="deleteData"
      ></vue-context-menu>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
    <!-- end content-main -->
  </div>
  <!-- end mod-grid -->
</template>
<script>
  import AddOrUpdate from './grid-add-or-update'

  export default {
    data () {
      return {
        /**
         * 主要数据，用于暂存业务数据
         * 定义的顺序是自上而下的，根据主数据使用的先后顺序定义
         */
        // 表单数据
        dataForm: {},
        // 选择的数据
        dataListSelections: [],
        // 表格显示的数据
        dataList: [],

        /**
         * 下面是组件数据，用于定义组件和控制组件的状态
         *  定义的顺序是自上而下的，根据组件和元素的顺序编写和查找
         */
        // 日期选择器的快捷方式定义
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        // 分页相关变量
        pageIndex: null,
        pageSize: null,
        totalPage: null,
        // 数据载入
        dataListLoading: false,
        // 部门信息，实际开发中需要从数据库中获取，这里展示其数据结构及用法
        departmentOptions: [
          {
            value: 0,
            label: '研发部',
            children: [
              {
                value: 0,
                label: 'Java组'
              },
              {
                value: 1,
                label: 'C#组'
              }
            ]
          },
          {
            value: 1,
            label: '销售部',
            children: [
              {
                value: 0,
                label: '客服组'
              },
              {
                value: 1,
                label: '宣传组'
              }
            ]
          }
        ],
        // 复选框结果是键值，复选框能够选的值为值数组
        roleOption: [
          '管理员', '部门管理员', '组管理员', '组员'
        ],
        courseOption: [
          '语文', '数学', '英语', '历史'
        ],
        // 右键菜单定义
        selectedRow: null,
        menuData: {
          menuName: 'employee',
          axis: {x: null, y: null},
          menulists: [
            // 事件，图标，名称
            {fnHandler: 'select', icoName: 'el-icon-search', btnName: '查看'},
            {fnHandler: 'update', icoName: 'el-icon-edit-outline', btnName: '修改'},
            {fnHandler: 'delete', icoName: 'el-icon-delete', btnName: '删除'}
          ]
        },
        // 控制更新或者新增的显示
        addOrUpdateVisible: false,
        // 导出Excel表的字段名称
        dataListFields: {
          '姓名': 'userName',
          '邮件': 'email',
          '电话': 'mobile'
        }
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.pageSize = this.pageSizeState
      this.getDataList()
    },
    methods: {
      /**
       * 主要业务数据的操作函数
       */
      // 数据操作函数
      getDataList () {
        // 定义参数
        // let params = {
        //   'page': this.pageIndex,
        //   'limit': this.pageSize,
        //   'userName': this.dataForm.userName
        // }

        this.$http.request(this.api.exampleGridList + '?limit=' + this.pageSize).then(res => {
          if (res && res.code === 0) {
            let data = res.data
            this.dataList = data.list
            this.totalPage = data.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      /**
       * 点击更新按钮，执行更新的表单提交操作
       */
      addOrUpdateHandle (id) {
        /**
         * 使用弹出层进行新增或者修改
         */
        // this.addOrUpdateVisible = true
        // this.$nextTick(() => {
        //   this.$refs.addOrUpdate.init(id)
        // })

        /**
         * 使用新页面(tab)进行新增或者修改
         */
        this.$router.replace({name: 'example-add', params: {id: id}})
      },

      /**
       * 执行删除的表单提交操作
       */
      deleteHandle (id) {
        var ids = id != null ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm('提示', `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, 'warning').then(() => {
          this.$http.request(this.api.exampleGridDelete, ids, 'POST').then(res => {
            if (res && res.code === 0) {
              this.$message('操作成功').then(res => {
                this.getDataList()
              })
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch((res) => {
          console.log(res)
        })
      },

      // 单击右键-执行删除操作
      deleteData () {
        // console.log(this.selectedRow)
        this.deleteHandle(this.selectedRow.id)
      },

      // 单击右键-执行编辑操作
      updateData () {
        this.addOrUpdateHandle(this.selectedRow.id)
      },

      // 单击右键-执行查看
      selectData () {
        // console.log(this.selectedRow)
        this.$refs.gridDataTable.toggleRowExpansion(this.selectedRow)
      },

      /**
       * 组件控制和页面控制的函数
       */

      /**
       * 选择执行句柄，多选
       * 1.定义表的selection-change事件
       * 2.定义此事件的函数
       */
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      /**
       * 点击行-选中行
       * 1.设置表的ref属性为：gridDataTable
       * 2.设置click-row事件
       * 3.定义此事件的函数
       */
      clickRowHandle (row) {
        this.$refs.gridDataTable.toggleRowSelection(row)
      },
      /**
       * 定义对行的右键操作，这里定义右键点击出现操作菜单
       * 1. 安装组件：vue-contextmenu :https://github.com/chIIC/vue-contextmenu
       * 2. 全局挂载，参考文档或者main.js
       * 3. 定义表格的row-contextmenu事件，绑定函数contextmenuHandle,定义数据为：this.menuData
       * 4. 定义在this.menuData中定义的事件函数
       * 5. template中添加组件vue-context-menu
       * 6. src\assets\scss\_custom.css更改菜单默认样式
       */
      contextmenuHandle (row, event) {
        event.preventDefault()
        let x = event.clientX
        let y = event.clientY
        this.menuData.axis = {
          x, y
        }
        this.selectedRow = row
      }
    },
    computed: {
      // 计算属性：用于计算当前显示器高度，并计算表格显示合适的行数
      pageSizeState: {
        get () {
          return this.$store.state.common.pageSize
        },
        set (val) {
          this.$store.commit('common/updatePageSize', val)
        }
      }
    },
    mounted () {

    }
  }
</script>
<style scoped>
  .mod-grid {
    display: flex;
    flex-direction: column;
  }

  .content-top {
    display: block;
  }

  .image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .formLabel {
    color: #99a9bf;
    width: 80px;
    text-align: end;
  }
</style>

